import Taro, { Component } from '@tarojs/taro'
import { View, Image, RichText } from '@tarojs/components'
import { AtTabs, AtTabsPane} from 'taro-ui'
import styles from './index.module.less'
import Footer from '../../components/Footer'
import MediaInfo from '../../components/MediaInfo'
import PriceDeclare from '../../components/PriceDeclare'
import CardList from '../../components/CardList'

export default class extends Component {
    constructor(props) {
        super(props)

        this.state = {
            current: 0,
            
        }
    }


    handleClick(value) {
        this.setState({
            current: value,
        })
    }

    render() {
        const { imageSrc = "https://img.yzcdn.cn/upload_files/2020/02/20/FkXvyfIvMCsTfHjyawNnbgFanvBi.jpg!large.jpg" } = this.props;
        const tabList = [{ title: '专栏简介' }, { title: '专栏目录' }]
        const richText = "<p style=\"margin-bottom:0px;\"><strong>听亚男育儿说，做成长型父母。</strong></p><p style=\"margin-bottom:0px;\">陈亚男</p><p style=\"white-space:normal;\">国家教育部高职院校学前教育专业蒙台梭利教学标准课程组主任</p><p style=\"white-space:normal;\">高职院校学前教育专业全国职业技能大赛评委</p><p style=\"white-space:normal;\">北京师范大学特聘教授</p><p style=\"white-space:normal;\">蒙台梭利（天津）研究开发中心院长</p><p style=\"white-space:normal;\">教育部国培计划讲师</p><p style=\"white-space:normal;\">童话作家</p><p style=\"white-space:normal;\">国际认证系统排列导师</p><p style=\"white-space:normal;\">首批德国系统排列协会会员&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</p><p style=\"white-space:normal;\">北京水米田教育集团联合创始人、教育总监、总园长</p><p><span style=\"font-size:12px;color:rgb(127 , 127 , 127);\"></span><br /></p>"
        const { mediaInfo = { title: '亚男育儿说', subTitle: [{ name: '已学', value: '238人' }, { name: '讲师', value: '陈亚男' }, { name: '时间', value: '2019-12-28' }] } } = this.props;
        const array = new Array(12)
        array.fill({
            img: 'https://img.yzcdn.cn/upload_files/2020/03/14/8e8b9a7a71fe55be2d3545cf1975a53d.jpg!small.jpg',
            type: 'audio',
            title: '不能溜娃的漫长假期 爸妈还能干点啥',
            subTitle: '养育男孩',
            metas: ['7次观看', '39:14']
        })
        return (
            <View className={styles.page}>
                <Image className={styles.coverImage} src={imageSrc} mode='scaleToFill' ></Image>
                <AtTabs className={styles.tabHeader} current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
                    <AtTabsPane current={this.state.current} index={0} >
                        <View className={styles.mediaInfo}>
                            <MediaInfo  {...mediaInfo} />
                        </View>
                        <RichText nodes={richText} className={styles.richText} />
                    </AtTabsPane>
                    <AtTabsPane className={styles.tabsPane} current={this.state.current} index={1}>
                        <View className={styles.toolBar}>
                            全部内容({array.length})
                        </View>
                        {array.map((item, index) => (
                            <View className={styles.columListItem} key={index}>
                                <CardList {...item} />
                            </View>
                        ))}

                    </AtTabsPane>
                </AtTabs>
                <PriceDeclare />
                <Footer />
            </View >
        )
    }
}
